<template>
  <div>
    <div class="search-section">
      <div class="input-section">
        <div
          class="search-input"
          :style="{
            borderRadius: propsData.params.borderType == 1 ? '30px' : '4px',
            justifyContent: contentAlign,
            backgroundColor: propsData.params.inputBgColor,
            borderColor: propsData.params.inputBorder,
          }"
        >
          <div
            class="input-inner"
            :style="{ color: propsData.params.inputTextColor }"
          >
            <i class="iconfont icon-sousuo"></i>
            <span>{{ placeholder }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="holo-place" v-if="propsData.params.fixedTop"></div> -->
  </div>
</template>

<script>
export default {
  name: "diySearch",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {};
  },
  mounted() {},
  watch: {},
  computed: {
    placeholder() {
      let str = this.propsData.params.placeholder;
      if (!str) {
        str = "请输入";
      }
      return str;
    },
    contentAlign() {
      return this.propsData.params.contentAlign;
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.search-section {
  width: 100%;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .input-section {
    width: 93.6%;
    height: 32px;
    display: flex;
    align-items: center;

    .search-input {
      width: 100%;
      height: 100%;
      border-radius: 30px;
      overflow: hidden;
      background-color: #f2f2f2;
      display: flex;
      padding-right: 10px;
      border: 1px solid #707070;
      position: relative;

      .input-inner {
        position: relative;
        display: inline-block;
        color: #9B9B9B;
      }
      .iconfont {
        position: absolute;
        left: 11px;
        top: 4px;
        z-index: 11;
      }
      span {
        height: 100%;
        line-height: 32px;
        margin-left: 30px;
      }
    }
  }
}
.fixedTop {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 111;
}
.holo-place {
  width: 100%;
  height: 42px;
}
</style>
